<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="index.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="/resources/demos/style.css">
    <link href="./pop.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
    <body>
      <div class="pop"> 
          <div class="head">
             <button class="popclose" onclick="pop_close()">X</button>
          </div>
          <div class="content">
              <div class="pop-notice">
                  <!-- MP3文件 -->
              </div>
              <div class="file-path">
                  <p>文件路径</p>
                  <input id="f-path" value="" />
                  <button class="sfile" onclick="file_path()">
                    <img src="./res/dir.png"/>
                  </button>
              </div>
              <div class="file-path">
                <p>保存路径</p>
                <input id="save-path" value="" />
                <button class="sfile" onclick="save_path()">
                  <img src="./res/dir.png"/>
                </button>
              </div>
              <div class="select">
                  <div>
                    <select id="is_cpu">
                      <option value ="cpu">CPU</option>
                      <option value ="gpu">GPU</option>
                    </select>
                    <select id="language">
                      <option value ="chinese">中文</option>
                      <option value ="korean">韩语</option>
                      <option value ="japanese">日语</option>
                      <option value ="english">英语</option>
                    </select>
                    <select id="model">
                      <option value ="base">普通</option>
                      <option value ="tiny">快速</option>
                      <option value ="small">中级</option>
                      <option value ="medium">高级</option>
                    </select>
                  </div>
                  <button onclick="confirm()">确定</button>
              </div>
          </div>
      </div>

      <div class="out-box">
        <!-- 工具栏 -->
          <div class="head-tools flex-col-center">
            <!-- Example single danger button -->
            <div class="dropdown">
              <button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
                设置
              </button>
              <div class="dropdown-menu">
                <button class="dropdown-item btn-info" type="button" onclick="change_theme(1)">日间模式</button>
                <button class="dropdown-item btn-info" type="button" onclick="change_theme(2)">夜间模式</button>
                <button class="dropdown-item btn-info" type="button">联系我们</button>
              </div>
            </div>

          </div>
          <div class="content-tools flex-row-center">
              <!-- 内容区 -->
              
              <div class="left-panel">
                  <div class="head-text flex-center">
                    音频格式选择
                  </div>
                 <!-- 格式区  MP3 FLAC MP4 -->
                  <div class="grid-box">
                      <div onclick="video_read('MP3文件',0)" class="mp3 item flex-center"><img src="./res/mp3.png"/></div>
                      <div onclick="video_read('MP4文件',1)" class="mp3 item flex-center"><img src="./res/mp4.png"/></div>
                      <div onclick="video_read('WAV文件',2)" class="mp3 item flex-center"><img src="./res/wav.png"/></div>
                      <!-- <div class="mp3 item flex-center"><img src="./res/mp3.png"/></div>
                      <div class="mp3 item flex-center"><img src="./res/mp3.png"/></div>
                      <div class="mp3 item flex-center"><img src="./res/mp3.png"/></div> -->
                  </div> 
                </div>
              <div class="right-panel">
                  <div class="head flex-col-center">
                      <button class="run" onclick="run()">
                        <img src="./res/start.png"/>
                        运行
                      </button>
                      <div class="msg">
                          <!-- 完成(0/0) -->
                      </div>
                  </div>
                  <div class="pross"> 
                     <!-- <div class="block">
                        <div class="vimg flex-center">
                            <img src="./res/mp3.png"/>
                        </div>
                        <div class="pross-panel">
                          <div class="vname">
                              test.mp4
                          </div>
                          <div class="pbar">
                            <div class="progress">
                              <div class="progress-bar" role="progressbar" style="width:70%">
                                70%
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="ctl">
                          <button>
                            <img src="./res/start.png"/>
                          </button>
                          <div class="notice">
                            已暂停...
                          </div>

                        </div>
                        <div class="delete">
                            删除
                        </div>
                     </div> -->
                  </div>
              </div>

          </div>
          <div class="footer flex-col-center">
              <div>
                一切已经准备就绪...
              </div>
          </div>
      </div>
  </body>
  <script src="./index.js"></script>
  <style>
    @import url("static/index.css");
    @import url("static/pop.css");
  </style>
</html>